<template>
	<div class="login">
		<div class="form-box">
			<div class="form-row">
				<i class="iconfont icon-shouji"></i>
				<input type="tel" placeholder="请输入手机号码" />
			</div>
			<div class="form-row">
				<i class="iconfont icon-Code"></i>
				<input type="text" placeholder="请输入验证码" />
			</div>
			<div class="form-row">
				<i class="iconfont icon-Code"></i>
				<input type="text" placeholder="请设置新密码" />
			</div>
			<div class="form-btn">
				<button>确定重置</button>
			</div>
		</div>

	</div>
</template>

<script>
</script>

<style lang="less" scoped>
	.login {
		background-image: url(http://img.hb.aicdn.com/084b20b3a05bf2c89f444ef2269d09d8b70e5ff380fb0-nFDWC4_fw658);
		height: 100%;
		text-align: center;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.form-box {
			width: 85%;
		}
		.form-row {
			margin-bottom: 0.2rem;
			padding: 0.2rem 3px;
			background-color: rgba(0, 0, 0, .4);
			display: flex;
			align-items: center;
			border-radius: 3px;
			position: relative;
			input {
				background-color: transparent;
				border: none;
				color: #fff;
				padding: 0.1rem 0;
				font-size: 0.28rem;
				flex: 1;
			}
			.iconfont {
				color: #FFFFFF;
				font-size: 0.32rem;
				margin-right: .2rem;
				margin-left: 0.2rem;
			}
			.pass {
				float: left;
				color: #fff;
			}
			.reg {
				float: right;
				color: #fff;
			}
		}
		.form-btn {
			button {
				display: block;
				background-color: #006CB5;
				border-radius: 1rem;
				padding: .1rem;
				text-align: center;
				margin: 0 auto;
				margin-top: .5rem;
				border: none;
				color: #fff;
				letter-spacing: .1rem;
				width: 100%;
				padding: 0.3rem 0;
				outline: none;
			}
		}
	}
</style>